<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="<%=basePath %>/static/js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/static/css/basic.css">
    <script src="<%=basePath %>/static/js/bootstrap.min.js"></script>
    <style>
        .bootstrap-admin-panel-content {
            padding-top: 10px;
        }
        
        .black_overlay {
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 1001;
            filter: alpha(opacity=88);
        }
        
        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: auto;
            padding: 20px;
            border: 1px solid gray;
            background-color: white;
            z-index: 1002;
            overflow: auto;
            border-radius: 8px;
        }
    </style>
    <script>
        $(function () {
            $(".addBtn").on("click", function () {
                $("#light").hide().fadeIn(600).css("display", "block");
                $("#fade").hide().fadeIn(600).css("display", "block");
            });

            $("#inner").on("click", function () {
                $("#light").fadeOut(600).hide(300);
                $("#fade").fadeOut(600).hide(300);
            });

            $(".closeBtn").on("click", function () {
                $("#light").fadeOut(600).hide(300);
                $("#light-up").fadeOut(600).hide(300);
                $("#fade").fadeOut(600).hide(300);
                $("#light-del").fadeOut(600).hide(300);
                $("#light-update").fadeOut(600).hide(300);

            });

            /*给修改按钮注册点击事件，点击之后弹出更新弹出框*/
            $(".btn-update").on("click", function () {

                /*获得当前点击的修改按钮的父级的父级标签(tr)*/
                let parent = $(this).parent().parent();

                /*获得更新按钮对应的记录条数的相关信息(用于回显在修改的弹出框中)*/
                let typeId = parent.find(".typeId").text();
                let typeName = parent.find(".typeName").text();

                $("#typeId-up").val(typeId);
                $("#typeName-old").text(typeName);


                $("#light-update").hide().fadeIn(600).css("display", "block");
                $("#fade").hide().fadeIn(600).css("display", "block");
            });

            /*给删除按钮注册事件，点击删除之后，弹出删除确认框*/
            $(".btn-del").on("click", function () {

                /*获得当前点击的修改按钮的父级的父级标签(tr)*/
                let parent = $(this).parent().parent();

                /*要删除的读者类型的编号*/
                let typeId = parent.find(".typeId").text();
                /*要删除的图书种类中的书本数量*/
                // let typescount = parent.find(".typescount").text();

                $("#typeId-del").val(typeId);
                // $("book-count-del").text(typescount);

                $("#light-del").hide().fadeIn(600).css("display", "block");
                $("#fade").hide().fadeIn(600).css("display", "block");
            });


        })
    </script>
</head>
<body>
<!--头部-->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="javascript:;">欢迎来到图书管理系统</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <!--<li><a href="javascript:;" class="btn btn-default btn-login">登录</a></li>-->
                <li class="dropdown" style="margin-top: 5px;">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-haspopup="true" aria-expanded="false"> <span
                        class="glyphicon glyphicon-user"></span> 欢迎您， admin <span
                        class="caret"></span></a>
                    <ul class="dropdown-menu" style="margin-top: 2px">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--主体-->
<div class="container-fluid" id="main">
    <div class="row">
        <div class="col-md-2 left-content">
            <div class="aside-nav">
                <ul class="list-group aside-nav-list">
                    <li class="list-group-item ">
                        <a href="<%=basePath%>/admin/bookmanager/1">图书管理
                            <span class="pull-right glyphicon glyphicon-chevron-right"></span>
                        </a>
                    </li>
                    <li class="list-group-item active">
                        <a href="<%=basePath%>/admin/booktypemanager">图书分类管理
                            <span class="pull-right glyphicon glyphicon-chevron-right"></span>
                        </a>
                    </li>
                    <li class="list-group-item "><a href="javascript:;">图书借阅 <span
                        class="pull-right glyphicon glyphicon-chevron-right"></span></a></li>
                    <li class="list-group-item "><a href="javascript:;">图书归还 <span
                        class="pull-right glyphicon glyphicon-chevron-right"></span></a></li>
                    <li class="list-group-item "><a href="javascript:;">借阅查询 <span
                        class="pull-right glyphicon glyphicon-chevron-right"></span></a></li>
                    <li class="list-group-item "><a href="javascript:;">逾期处理 <span
                        class="pull-right glyphicon glyphicon-chevron-right"></span></a></li>
                    <li class="list-group-item ">
                        <a href="<%=basePath%>/admin/adminmanager">管理员管理
                            <span class="pull-right glyphicon glyphicon-chevron-right"></span>
                        </a>
                    </li>
                    <li class="list-group-item ">
                        <a href="<%=basePath%>/admin/readermanager">读者管理
                            <span class="pull-right glyphicon glyphicon-chevron-right"></span>
                        </a>
                    </li>
                    <li class="list-group-item "><a href="<%=basePath%>/admin/setting">系统设置
                        <span
                            class="pull-right glyphicon glyphicon-chevron-right"></span></a></li>
                    <li class="list-group-item "><a href="javascript:;">在线考试 <span
                        class="pull-right glyphicon glyphicon-chevron-right"></span></a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-10 right-content">
            <div class="row">
                <div class="col-md-12">
                    <div class="section-wrap">
                        <div class="wrap-top">
                            <div class="panel panel-default">
                                <div class="panel-heading" style="color: #9d9d9d">添加图书种类</div>
                                <div class="panel-body" style="font-size: 15px">
                                    <input type="button" class="btn btn-primary btn-sm addBtn"
                                           value="添加">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wrap-bottom">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>类型编号</th>
                                <th>种类名称</th>
                                <th>库存书量</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <c:if test="${booktypes!=null}">
                                <tbody>
                                <c:forEach items="${booktypes}" var="type" varStatus="loop"
                                           step="2">
                                    <tr>
                                        <td class="typeId">${type.typeId}</td>
                                        <td class="typeName">${type.typeName}</td>
                                        <td
                                            class="typescount">${booktypesCount[(loop.count-1)*2]}</td>
                                        <td>
                                            <button class="btn btn-info btn-xs btn-update"
                                                    style="margin-right: 3px"
                                            >修改
                                            </button>
                                            <button class="btn btn-danger btn-xs btn-del"
                                                    style="margin-right: 3px">删除
                                            </button>
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </c:if>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>类型编号</th>
                                <th>种类名称</th>
                                <th>库存书量</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <c:if test="${booktypes!=null}">
                                <tbody>
                                <c:forEach items="${booktypes}" var="type" begin="1"
                                           varStatus="loop"
                                           step="2">
                                    <tr>
                                        <td class="typeId">${type.typeId}</td>
                                        <td class="typeName">${type.typeName}</td>
                                        <td class="typescount">${booktypesCount[loop.count*2-1]}</td>
                                        <td>
                                            <button class="btn btn-info btn-xs btn-update"
                                                    style="margin-right: 3px">修改
                                            </button>
                                            <button class="btn btn-danger btn-xs btn-del"
                                                    style="margin-right: 3px">删除
                                            </button>
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </c:if>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%--弹出层的半透明背景--%>
<div id="fade" class="modal black_overlay"></div>
<%--添加按钮的弹出框--%>
<div id="light" class="white_content">
    <button type="button" class="close closeBtn" data-dismiss="modal" aria-label="Close"
            title="关闭">
        <span aria-hidden="true">×</span>
    </button>
    <div class="row">
        <div class="col-md-10 col-sm-offset-1">
            <!--保证样式水平不混乱-->
            <form class="form-horizontal" method="post" action="<%=basePath%>/booktype/add">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">
                        添加新的图书种类
                    </h4>
                </div>
                <div class="modal-body">
                    <!---------------------表单-------------------->
                    <div class="form-group">
                        <label for="typeName-add" class="col-sm-4 control-label">新的图书种类</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="typeName-add"
                                   name="typeName">
                        </div>
                    </div>
                    <!---------------------表单-------------------->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default closeBtn" data-dismiss="modal"
                            title="关闭">
                        关闭
                    </button>
                    <button type="submit" class="btn btn-primary" id="addReaderType">
                        添加
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<%--删除按钮的弹出框--%>
<div id="light-del" class="white_content" style="top: 30%;left: 35%;width: 30%;">
    <button type="button" class="close closeBtn" data-dismiss="modal" aria-label="Close"
            title="关闭">
        <span aria-hidden="true">×</span>
    </button>
    <div class="row">
        <div class="col-md-10 col-sm-offset-1">
            <!--保证样式水平不混乱-->
            <form class="form-horizontal" method="post" action="<%=basePath%>/booktype/del">
                <div class="modal-header">
                    <h4 class="modal-title alert alert-danger" id="myModalLabel-del">
                        警告:确认是否要删除该图书分类
                    </h4>
                </div>
                <div class="modal-body hidden">
                    <!---------------------表单-------------------->
                    <div class="form-group">
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="typeId-del"
                                   name="typeId" />
                        </div>
                    </div>
                    <!---------------------表单-------------------->
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger col-md-5" id="ReaderType-del">
                        确认删除
                    </button>
                    <button type="button" class="btn btn-success col-md-5 pull-right closeBtn"
                            data-dismiss="modal"
                            title="关闭">
                        取消删除
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<%--修改按钮的弹出框--%>
<div id="light-update" class="white_content" style="top: 30%;left: 35%;width: 30%;">
    <button type="button" class="close closeBtn" data-dismiss="modal" aria-label="Close"
            title="关闭">
        <span aria-hidden="true">×</span>
    </button>
    <div class="row">
        <div class="col-md-10 col-sm-offset-1">
            <!--保证样式水平不混乱-->
            <form class="form-horizontal" method="post" action="<%=basePath%>/booktype/update">
                <div class="modal-header">
                    <h4 class="modal-title alert alert-info" id="myModalLabel-up">
                        修改图书种类名称:
                    </h4>
                </div>
                <div class="modal-body">
                    <!---------------------表单-------------------->
                    <div class="form-group hidden">
                        <label for="typeId-up" class="col-md-4 control-label">种类编号</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="typeId-up"
                                   name="typeId" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="typeName-old" class="col-md-4 control-label">原本名称</label>
                        <div class="col-sm-8">
                            <span type="text" class="form-control" id="typeName-old"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="typeName-up" class="col-md-4 control-label">新的名称</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="typeName-up"
                                   name="typeName" />
                        </div>
                    </div>
                    <!---------------------表单-------------------->
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success col-md-5" style="margin-right:
                    20px">
                        更新
                    </button>
                    <button type="button" class="btn btn-warning col-md-5 closeBtn"
                            data-dismiss="modal"
                            title="关闭">
                        取消
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>